<template>
    <div style="margin-right: 30px;height: 290px;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="父菜单" prop="userName">
                        <el-cascader :options="options" placeholder="默认一级菜单" v-model="ruleForm.checkedNode"
                            :props="{ checkStrictly: true,value:'menuId',label:'menuName',children:'child'}" clearable>
                        </el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="menuName">
                        <el-input v-model="ruleForm.menuName" @change="getRouent()"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单类型" prop="menuType">
                        <el-radio-group v-model="ruleForm.menuType">
                            <el-radio v-for="(item, index) in menuType" :label="item.id" :key="item.id">
                                {{item.name}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="路由名称" prop="routeName">
                        <el-input v-model="ruleForm.routeName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="组件路径" prop="component">
                        <el-input v-model="ruleForm.component"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单图标" prop="icon">
                        <e-icon-picker v-model="ruleForm.icon" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单路由" prop="menuRoute">
                        <el-input v-model="ruleForm.menuRoute"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="接口Url" prop="menuAPI">
                        <el-input v-model="ruleForm.menuAPI"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="重定向" prop="redirect">
                        <el-input v-model="ruleForm.redirect"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    import pinyin from 'js-pinyin';
    import { GetTreeNodes, Add } from '@/api/menu';
    export default {
        name: 'RbacProjectUiAdminAdd',

        data() {
            return {
                ruleForm: {
                    menuName: '',
                    parentId: '',
                    menuType: '',
                    menuRoute: '',
                    icon: '',
                    menuAPI: '',
                    routeName: "",
                    component: "",
                    redirect: "",
                    checkedNode: []
                },
                rules: {
                    menuName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    menuType: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                },
                options: []
            };
        },
        props: {
            menuType: {
                type: Array
            }
        },
        mounted() {
            this.loadData();
            console.log(pinyin.getFullChars('博客'));//BoKe
            console.log(pinyin.getCamelChars('博客'));//BK
        },

        methods: {
            loadData() {
                GetTreeNodes().then(m => {
                    this.options = m.data;
                });
            },
            SaveAdd() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.ruleForm.parentId = this.ruleForm.checkedNode.slice(-1)[0];
                        var _this = this;
                        Add(this.ruleForm).then(m => {
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                onClose: function () {
                                    _this.$emit("Save");
                                }
                            });
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getRouent() {
                this.ruleForm.routeName = pinyin.getFullChars(this.ruleForm.menuName).toLowerCase();
            }
        },
    };
</script>

<style>
    .el-cascader-menu__wrap {
        height: 304px;
    }

    .el-cascader {
        width: 100%;
    }
</style>